<template>
	<view >
		<view class="subsection">
			<view :class="['subsection1', { active: activeSection === 'section1' }]" @click="setActive('section1')">
				<view>进水</view>
			</view>
			<view :class="['subsection2', { active: activeSection === 'section2' }]" @click="setActive('section2')">
				<view>出水</view>
			</view>
		</view>

		<view class="grid" v-if="this.activeSection =='section1'">
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/flow_rate.png"></u-avatar>
					<view class="grid-text2">瞬时流量
					</view>
					<view class="grid-text3">（m³/h）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{homeData.water_inflow_it_flow_rate}}</view>
					<view class="grid-value2">{{ formattedTime }}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/dayInflowAvg.png"></u-avatar>
					<view class="grid-text2">本月日均流量</view>
					<view class="grid-text3">（m³/h）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{dayInflowAvg}}</view>
					<view class="grid-value2">{{formattedTime}}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/dayInflow.png"></u-avatar>
					<view class="grid-text2">今日累计流量</view>
					<view class="grid-text3">（m³）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{dayInflow}}</view>
					<view class="grid-value2">{{formattedTime}}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/monthInflow.png"></u-avatar>
					<view class="grid-text2">本月累计流量</view>
					<view class="grid-text3">（m³）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{monthInflow}}</view>
					<view class="grid-value2">{{formattedTime}}</view>
				</view>
			</view>
		</view>

		<view class="grid" v-if="this.activeSection == 'section2'">
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/effluent_it_flow_rate.png"></u-avatar>
					<view class="grid-text2">瞬时流量</view>
					<view class="grid-text3">（m³/h）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{homeData.water_effluent_it_flow_rate}}</view>
					<view class="grid-value2">{{ formattedTime }}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/dayEffluentAvg.png"></u-avatar>
					<view class="grid-text2">本月日均流量</view>
					<view class="grid-text3">（m³/h）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{dayEffluentAvg}}</view>
					<view class="grid-value2">{{ formattedTime }}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/dayEffluent.png"></u-avatar>
					<view class="grid-text2">今日累计流量</view>
					<view class="grid-text3">（m³）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{dayEffluent}}</view>
					<view class="grid-value2">{{ formattedTime }}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="86" src="/static/index/main/monthEffluent.png"></u-avatar>
					<view class="grid-text2">本月累计流量</view>
					<view class="grid-text3">（m³）</view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{monthEffluent}}</view>
					<view class="grid-value2">{{ formattedTime }}</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props: {
			homeData: {
				type: Object,
				required: true
			},
			formattedTime: {
				type: String,
				required: true
			},
		},
		computed: {
			dayInflow() {
				if ( this.homeData.water_day_inflow_count > 10000) {
					return (this.homeData.water_day_inflow_count / 10000).toFixed(2) + '万';
				} else {
					return this.homeData ? this.homeData.water_day_inflow_count : '数据不可用';
				}
			},
			monthInflow() {
				if (this.homeData.water_month_inflow_count > 10000) {
					return (this.homeData.water_month_inflow_count / 10000).toFixed(2) + '万';
				} else {
					return this.homeData.water_month_inflow_count;
				}
			},
			dayEffluent() {
				if (this.homeData.water_day_effluent_count > 10000) {
					return (this.homeData.water_day_effluent_count / 10000).toFixed(2) + '万';
				} else {
					return this.homeData.water_day_effluent_count;
				}
			},
			monthEffluent() {
				if (this.homeData.water_month_effluent_count > 10000) {
					return (this.homeData.water_month_effluent_count / 10000).toFixed(2) + '万';
				} else {
					return this.homeData.water_month_effluent_count;
				}
			},
			monthEffluent() {
				if (this.homeData.water_month_effluent_count > 10000) {
					return (this.homeData.water_month_effluent_count / 10000).toFixed(2) + '万';
				} else {
					return this.homeData.water_month_effluent_count;
				}
			},
			dayEffluentAvg() {
				if (this.homeData.water_day_effluent_avg > 10000) {
					return (this.homeData.water_day_effluent_avg / 10000).toFixed(2) + '万';
				} else {
					return this.homeData.water_day_effluent_avg;
				}
			},
			dayInflowAvg() {
				if (this.homeData.water_day_inflow_avg > 10000) {
					return (this.homeData.water_day_inflow_avg / 10000).toFixed(2) + '万';
				} else {
					return this.homeData.water_day_inflow_avg;
				}
			},
		},
		data() {
			return {
				activeSection: 'section1',
			}
		},

		methods: {
			setActive(section) {
				this.activeSection = section;
			},

		},
	}
</script>

<style lang="scss">
	@import '@/pages/sys/index/index/styles/mainData.scss';
</style>